<template>
  <el-layout>
    <el-layout-header>
      <!-- 标题栏目 -->
      <div class="head-container flex items-center justify-between">
        <div class="head-title">
          <img style="width: 60px; height: 30px" src="@/assets/images/logo.png" alt="" />
        </div>
        <!-- <div class="head-operate flex justify-end items-center">
          <el-dropdown placement="bottomRight" v-if="hasLogin">
            <el-button type="text" class="flex items-center text-lg pl-2 pr-1">
              {{ userStore?.userName || 'admin' }}
              <SvgIcon name="arrow-down" width="20" height="20" class="ml-2" />
            </el-button>
            <template #overlay>
              <el-menu>
                <el-menu-item :style="{ padding: 0 }">
                  <div class="flex items-center my-2 mx-4" :style="{ width: 'max-content' }" @click="handleLogout">
                    <SvgIcon name="logout" width="20" height="20" class="mr-1" />
                    注销登录
                  </div>
                </el-menu-item>
              </el-menu>
            </template>
          </el-dropdown>
        </div> -->
      </div>
    </el-layout-header>
    <el-layout>
      <!-- 左侧菜单 -->
      <div style="width: 100%; display: flex">
        <div style="width: 200px; background: #fff">
          <el-menu v-model:selectedKeys="currentRoute" mode="inline">
            <template v-for="(item, index) in menuRoute">
              <el-sub-menu v-if="item.children" :key="item.path" :title="item.meta.title" @click="handleRouteChange(item.path)">
                <el-menu-item v-for="ele in item.children" :key="ele.path" :title="ele.meta.title" :index="index">{{
                  ele.meta.title
                }}</el-menu-item>
              </el-sub-menu>
              <el-menu-item v-else :key="menuRoute[index].path" @click="handleRouteChange(item.path)" :index="index">{{
                item.meta.title
              }}</el-menu-item>
            </template>
          </el-menu>
        </div>
        <div class="normal-screen-content">
          <router-view />
        </div>
      </div>
    </el-layout>
  </el-layout>
</template>
<script setup>
  import { ElMessageBox } from 'element-plus';
  import router from '@/router';
  // 需要后端修改的位置 在这里import layoutname form @/router/routes
  import { homeRoute } from '@/router/routes';
  import useUserStore from '@/store/modules/user';
  const index = ref(0);
  const hasLogin = import.meta.env.VITE_HAS_LOGIN === 'true';
  const userStore = useUserStore();
  const menuRoute = ref(homeRoute);

  const route = useRoute();
  const getCurrentRoute = (data) => {
    for (let i = 0; i < data.length; i++) {
      const ele = data[i];
      if (ele.path === route.path && ele.children) {
        menuRoute.value = ele.children;
      } else if (ele.children) {
        getCurrentRoute(ele.children);
      }
    }
  };
  getCurrentRoute(homeRoute);

  // 统一管理二级路由的一级显示
  const currentRoute = computed({
    get() {
      const { path } = router.currentRoute.value;
      if (path) {
        return [path];
      }
    },
    set() {},
  });
  const handleLogout = () => {
    ElMessageBox.confirm('确定要注销吗？', '系统提示', {
      distinguishCancelAndClose: true,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    }).then(async () => {
      await userStore.userLogout();
      router.push({ path: '/login' });
    });
  };
  const handleRouteChange = (val) => {
    router.push({ path: val });
  };
</script>
<style scoped lang="scss">
  ::v-deep .el-menu {
    height: calc(100vh - $base-header-height-rem);
    overflow-y: auto;
  }
  ::v-deep .el-menu-item.is-active {
    background-color: #e6f4ff;
  }
  ::v-deep .el-menu-item:hover {
    color: #409eff;
  }
  ::v-deep .el-layout-header {
    padding: 0 32px;
    height: $base-header-height;
    background: #040e1b;
  }

  ::v-deep .el-layout-content {
    padding: 0;
  }
  .normal-screen-content {
    flex: 1;
    height: calc(100vh - $base-header-height);
    background-color: $base-bg-color;
  }

  @media screen and (max-height: 850px) {
    ::v-deep .el-layout-header {
      padding: 0 0.32rem;
      height: $base-header-height-rem;
    }

    ::v-deep .el-layout-content {
      height: calc(100vh - $base-header-height-rem);
    }
  }
  .head-container {
    height: 100%;
    .head-title {
      width: 100%;
      height: 60px;
      font-size: 30px;
      font-weight: 400;
      letter-spacing: 0.08em;
      color: $white-color-0;
      display: flex;
      align-items: center;
      padding: 0 32px;
      background: #040e1b;
      .logo-bg {
        width: 300px;
        height: 60px;
        background: url('@/assets/images/logo.png') no-repeat;
        background-size: contain;
      }
    }
    .head-operate {
      button {
        color: rgb(255 255 255 / 85%);
      }
    }
  }
</style>
